<template>
  <div class="ceshi">
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
      :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">待核价</div>
      </template>

      <div class="screen">
        <div :class="screenIndex == index ? 'screen_div_hover' : 'screen_div'" v-for="(item, index) in screenList"
          :key="index" @click="navClick(item.id, index)">
          {{ item.name }}
        </div>
      </div>

      <div class="hm-form-item-box1">
        <div class="hm-form-title" id="commodity_information" style=" position: relative; ">基本信息</div>

        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">商品名称：</div>{{
                commoditydetailsData.styleName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品69码：</div>{{
                commoditydetailsData.styleCode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品编码：</div>{{
                commoditydetailsData.id
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">品牌：</div>{{
                commoditydetailsData.brandVo?.brandName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">贸易方式：</div>{{
                commoditydetailsData.tradeMode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">类目：</div>
              <div class="value">{{
                commoditydetailsData.productCategoryName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">规格/材质：</div>
              <div class="value">{{
                commoditydetailsData.specs
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">对接群名：</div>
              <div class="value">{{
                commoditydetailsData.groupName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">能否破价：</div>
              <div class="value">{{
                commoditydetailsData.discountPrice
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">历史最低售价：</div>
              <div class="value">{{
                commoditydetailsData.historyPrice
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">直播类型：</div>
              <div class="value">{{
                commoditydetailsData.liveType
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">选品部门：</div>
              <div class="value">{{
                commoditydetailsData.coreName
              }}</div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">合同状态：</div>
              <div class="value">
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.supplierVo?.sellStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.supplierVo?.sellStatus == '1' ? '#19D11B' : '#FC2540' }">
                  供销合同<img
                    :src="commoditydetailsData.supplierVo?.sellStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item" v-if="!commoditydetailsData.type"
                  :style="{ backgroundColor: commoditydetailsData.supplierVo?.discountStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.supplierVo?.discountStatus == '1' ? '#19D11B' : '#FC2540' }">
                  破价合同<img
                    :src="commoditydetailsData.supplierVo?.discountStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item" v-if="commoditydetailsData.type"
                  :style="{ backgroundColor: commoditydetailsData.supplierVo?.packageStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.supplierVo?.packageStatus == '1' ? '#19D11B' : '#FC2540' }">
                  包销合同<img
                    :src="commoditydetailsData.supplierVo?.packageStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.supplierVo?.depositStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.supplierVo?.depositStatus == '1' ? '#19D11B' : '#FC2540' }">
                  保证金协议<img
                    :src="commoditydetailsData.supplierVo?.depositStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
                <div class="examine_item"
                  :style="{ backgroundColor: commoditydetailsData.supplierVo?.supplementStatus == '1' ? '#E7FDEE' : '#FDE7E7', color: commoditydetailsData.supplierVo?.supplementStatus == '1' ? '#19D11B' : '#FC2540' }">
                  补充协议<img
                    :src="commoditydetailsData.supplierVo?.supplementStatus == '1' ? icon_lvseduihao : icon_wenhaohongse" />
                </div>
              </div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">卖点：</div>
              <div class="value">{{
                commoditydetailsData.sellingPoints
              }}</div>
            </div>
            <div class="mechanism_img">
              <div class="title">商品图片：</div>
              <div class="value" v-if="commoditydetailsData.productImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.productImage.split(',')" :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="collaboration_information">合作信息</div>
        <el-row class="content_div_cooperationMode">
          <el-col :span="24">
            <el-descriptions :column="3">
              <el-descriptions-item :label="commoditydetailsData.type == '1' ? '研发部：' : '招商部：'">{{
                commoditydetailsData.recruiterDept
              }}</el-descriptions-item>
              <el-descriptions-item :label="commoditydetailsData.type == '1' ? '研发专部：' : '招商员：'">{{
                commoditydetailsData.recruiter
              }}</el-descriptions-item>
              <el-descriptions-item label="是否走仓：" v-if="commoditydetailsData.productCategoryName.indexOf('饰品') >= 0">{{
                commoditydetailsData.warehouse ? '是' : '否'
              }}</el-descriptions-item>
              <el-descriptions-item v-else></el-descriptions-item>
            </el-descriptions>
            <div class="hm-form-mechanism" v-for="(item, index) in commoditydetailsData.hmMechanismsList" :key="index">
              <div class="mechanism_title">机制{{ index + 1 }}：</div>
              <el-descriptions :column="3">
                <el-descriptions-item label="合作方式：">{{ item.cooperationMode ? item.cooperationMode : '-'
                  }}</el-descriptions-item>
                <el-descriptions-item label="售价：">{{ item.price ? item.price : '-'
                  }}</el-descriptions-item>
                <el-descriptions-item label="佣金：">{{ item.commission ? item.commission + '%'
                  :
                  '-'
                  }}</el-descriptions-item>
                <el-descriptions-item label="直播机制：">{{ item.liveStreamingMechanism ?
                  item.liveStreamingMechanism :
                  '-'
                  }}</el-descriptions-item>
                <el-descriptions-item label="成本价：">{{ item.costPrice ? item.costPrice : '-'
                  }}</el-descriptions-item>
                <el-descriptions-item label="补充佣金：">{{ item.brokerage ? item.brokerage + '%' : '-'
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
        </el-row>

        <div class="hm-form-title" id="merchant_information">商家信息</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">供应商名称：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.supplierName }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">商家类型：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.supplierType }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">厂家地址：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.addr }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">供应商联系人：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.contactName }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">供应商联系电话：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.phone }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">厂家详细地址：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.address }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">统一社会信用代码：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.companyCode }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">营业执照有限期：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.businessDate }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">营业执照所在地：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.businessAddr }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">店铺id：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.storeId }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">店铺类型：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.storeType }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">店铺评分：</div>
              <div class="value">{{ commoditydetailsData.supplierVo?.storeGrade }}</div>
            </div>
            <div class="mechanism_img">
              <div class="title">营业执照：</div>
              <div class="value">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.supplierVo?.businessImage?.split(',')"
                  :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <el-row>
          <el-col :span="24" class="flex_div">
            <div class="label">
              <img src="@/assets/images/pdf.png" alt="">【{{ commoditydetailsData.styleName }}】信息卡 (A4) PDF
            </div>
            <div class="value">
              <span @click="preview(commoditydetailsData.id)">预览</span>
              <span @click="handleExport(commoditydetailsData.id)">下载</span>
            </div>
          </el-col>
        </el-row>

        <div class="hm-form-title" id="supplement_message">直播补充信息</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">发货时间：</div>{{
                commoditydetailsData.deliveryTime
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">发货地：</div>{{
                commoditydetailsData.placeDelivery
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">物流/快递：</div>{{
                commoditydetailsData.logistics
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">适用人群：</div>{{
                commoditydetailsData.eligibility
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">厂家可用库存：</div>{{
                commoditydetailsData.factoryStockNum
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">不发货地区：</div>
              <div class="value">{{
                commoditydetailsData.noSendArea
              }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">大货时间：</div>
              <div class="value">{{ commoditydetailsData.bigDate }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">包销时限：</div>
              <div class="value">{{ commoditydetailsData.packageDeadline }}</div>
            </div>
            <div class="mechanism_div" v-if="commoditydetailsData.type == '1'">
              <div class="title">包销提醒：</div>
              <div class="value">{{ commoditydetailsData.isPackageRemind ? '开' : '关' }}</div>
            </div>
            <div class="mechanism_img" v-if="commoditydetailsData.type == '1'">
              <div class="title">无AB货截图：</div>
              <div class="value" v-if="commoditydetailsData.noAbImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.noAbImage.split(',')" :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
            <div class="mechanism_img" v-if="commoditydetailsData.type == '1'">
              <div class="title">大货视频：</div>
              <div class="value" v-if="commoditydetailsData.bigVideo">
                <video controls :src="commoditydetailsData.bigVideos"></video>
              </div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="merchant_qualification">商品资质</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_divs mechanism_div">
              <div class="titles">备案凭证/行政许可批件：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.voucherImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div">
              <div class="titles">其他资质：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.otherImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div" v-if="commoditydetailsData.tradeMode == '进口'">
              <div class="titles">进口货物/原材料报关单：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.customsDeclarationImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div" v-if="commoditydetailsData.tradeMode == '进口'">
              <div class="titles">进口产品备案材料：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.customsInformationImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div" v-if="commoditydetailsData.tradeMode == '进口'">
              <div class="titles">进口产品原材料检验检疫证明：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.customsInspectionImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div" v-if="commoditydetailsData.tradeMode == '进口'">
              <div class="titles">检测报告：</div>
              <div class="values">
                <ImageUploadDrags v-model="commoditydetailsData.customsTestReportImgae" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="brand_qualification">品牌资质</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_divs mechanism_div">
              <div class="titles">品牌商标注册证：</div>
              <div class="values">
                <ImageUploadDrags v-if="commoditydetailsData.brandVo" v-model="commoditydetailsData.brandVo.brandImage"
                  :limit="5" :format="true" :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div">
              <div class="titles">商标授权使用证明：</div>
              <div class="values">
                <ImageUploadDrags v-if="commoditydetailsData.brandVo" v-model="commoditydetailsData.brandVo.usageImage"
                  :limit="5" :format="true" :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_div mechanism_divs">
              <div class="titles">使用授权品类：</div>
              <div class="values" v-if="commoditydetailsData.brandVo">{{
                commoditydetailsData.brandVo.usages }}</div>
            </div>
            <div class="mechanism_divs mechanism_div">
              <div class="titles">店铺销售授权：</div>
              <div class="values">
                <ImageUploadDrags v-if="commoditydetailsData.brandVo" v-model="commoditydetailsData.brandVo.sellImage"
                  :limit="5" :format="true" :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_div mechanism_divs">
              <div class="titles">销售授权品类：</div>
              <div class="values" v-if="commoditydetailsData.brandVo">{{
                commoditydetailsData.brandVo.sells }}</div>
            </div>
            <div class="mechanism_divs mechanism_div">
              <div class="titles">其他资质补充：</div>
              <div class="values">
                <ImageUploadDrags v-if="commoditydetailsData.brandVo" v-model="commoditydetailsData.brandVo.otherImage"
                  :limit="5" :format="true" :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
            <div class="mechanism_divs mechanism_div">
              <div class="titles">联名款或其他授权文件：</div>
              <div class="values">
                <ImageUploadDrags v-if="commoditydetailsData.brandVo"
                  v-model="commoditydetailsData.brandVo.jointlyImage" :limit="5" :format="true"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isType="false" />
              </div>
            </div>
          </div>
        </div>

        <!-- 价格审批 -->
        <div class="hm-form-title" id="review_information">审批信息</div>
        <div class="pricing_information">
          <div class="pricing_proposal">
            <el-radio-group v-model="qualificationsStatus" @change="qualificationsradioChange"
              :disabled="qualificationDisabled">
              <el-radio :label="1">资质通过</el-radio>
              <el-radio :label="0">补充资质</el-radio>
            </el-radio-group>
            <el-input maxlength="50" show-word-limit v-model="qualificationsAuditRemark"
              v-if="qualificationsStatus == 0" :rows="5" type="textarea" placeholder="请输入资审建议（必填），限制50字以内；" />
          </div>
          <div class="pricing_proposal" v-if="qualificationsStatus == 1">
            <el-radio-group v-model="pricingStatus" @change="pricingradioChange" :disabled="priceDisabled">
              <el-radio :label="1">核价通过</el-radio>
              <el-radio :label="0">重新议价</el-radio>
            </el-radio-group>
            <el-input maxlength="50" show-word-limit v-model="pricingradioAuditRemark" :rows="5"
              :disabled="priceDisabled" type="textarea" placeholder="请输入核价建议（必填），限制50字以内；" />
            <div v-if="pricingStatus == 1" class="label">
              <div class="label_left">平台比价截图</div>
              <div class="label_right">支持.jpg .jpeg .png格式, 小于5Mb
                图片不清晰将会被降低选中概率，故要求图片尺寸在800*800以上,文件小于10MB</div>
            </div>
            <div class="value">
              <ImageUploadDrags v-if="pricingStatus == 1" v-model="productImage" :limit="20" :fileSize="10"
                :isType="!priceDisabled" :isdownload="false" :isShowTip="false" :width="300" :height="180" />
            </div>
          </div>
          <div class="findings_audit_content">
            <div class="column" v-for="(item, index) in logList" :key="index">
              <div class="circle" :style="computedStyle(index, item)"></div>
              <div v-if="index !== logList.length - 1" class="line"></div>
              <div class="column_top">
                <div class="adopt_proposal">{{
                  item.name
                }}
                </div>
                <div class="adopt_proposals"
                  :style="{ 'color': item.des == '资审驳回' || item.des == '核价驳回' ? '#FC2540' : '' }">
                  {{
                    item.des }}
                </div>
                <div class="danger_date">
                  {{ item.time }}
                </div>
              </div>
              <div class="contents" v-if="item.title">
                <div class="contents_item" v-if="item.firstStatus == 8 || item.firstStatus == 9">
                  <div :class="(item.title == 10 || item.title == 11) ? 'consent' : 'reject'">资质建议
                  </div>
                  <div :class="(item.title == 10 || item.title == 11) ? 'consent_font' : 'reject_font'">
                    {{
                      (item.title == 10 || item.title == 11) ? '资审已通过' : item.auditQualityRemark }}
                  </div>
                </div>
                <div class="contents_item" v-if="item.firstStatus == 10">
                  <div :class="(item.title == 9 || item.title == 11) ? 'consent' : 'reject'">价格建议
                  </div>
                  <div :class="(item.title == 9 || item.title == 11) ? 'consent_font' : 'reject_font'">
                    {{
                      (item.title == 9 || item.title == 11) ? item.auditPriceRemark :
                        item.auditPriceRemark }}
                  </div>
                </div>
              </div>
              <div class="content" v-if="!item.title">
                <div class="content_flex" v-for="(ite, ind) in item.mechanismLogList" :key="ite.mechanismId">
                  <div v-if="ite.cooperationMode" class="content_flex_is">
                    <div class="content_div">机制{{ ind + 1 + ':' }}</div>
                    <div class="content_div">
                      {{ ite.cooperationMode }}
                    </div>
                    <div class="content_div">
                      {{ ite.cooperationMode == '分佣' ? ite.price : ite.costPrice }}
                    </div>
                    <div class="content_div" v-if="ite.cooperationMode == '分佣'">
                      {{ ite.brokerage ? ite.brokerage + '%' : '-' }}
                    </div>
                    <div class="content_div content_divs">
                      <el-tooltip :content="ite.liveStreamingMechanism" placement="top">
                        {{ ite.liveStreamingMechanism }}
                      </el-tooltip>
                    </div>
                    <div v-if="ite.commission">
                      {{ ite.commission + '%' }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div>
          <el-button type="primary" @click="confirmClick" :loading="loading">完成</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup name="commoditymodify" lang="ts">
import { auditFirst } from '@/api/group/productSelectionPricing';
import { exportCertId, auditAction } from '@/api/group/investmentPromotion/index';
const icon_lvseduihao = new URL('@/assets/images/icon_lvseduihao.png', import.meta.url).href;
const icon_wenhaohongse = new URL('@/assets/images/icon_wenhaohongse1.png', import.meta.url).href;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// 资质审核
const qualificationsStatus = ref(1);
// 核价审核
const pricingStatus = ref(1);
// 资质审核remark
const qualificationsAuditRemark = ref();
// 审核remark
const pricingradioAuditRemark = ref();

const auditRemark = ref();
const props = defineProps({
  commoditydetailsData: {
    type: Object,
    default: ''
  },
  dialogInfoVisible: {
    type: Boolean,
    default: false
  }
});
const productImage = ref();
const screenList = ref([
  { name: '基本信息', id: '#commodity_information' },
  { name: '合作信息', id: '#collaboration_information' },
  { name: '商家信息', id: '#merchant_information' },
  { name: '直播补充信息', id: '#supplement_message' },
  { name: '商品资质', id: '#merchant_qualification' },
  { name: '品牌资质', id: '#brand_qualification' },
  { name: '审批信息', id: '#review_information' }
]);
const loading = ref(false);
const screenIndex = ref(0);
const navClick = (id: string, index: number) => {
  const info: any = document.querySelector(id);
  info.scrollIntoView({ behavior: 'smooth' });
  screenIndex.value = index;
};
const logList: any = computed(() => {
  props.commoditydetailsData.auditFirstLogList.forEach((item: any) => {
    item.title = auditStatusNameById(item.firstStatus);
    item.name = handleName(item.firstStatus, item.auditNickName, item.requestNickName);
    item.time = handleTimes(item.firstStatus, item.requestTime, item.auditTime);
    item.des = handledes(item.firstStatus);
  });
  return props.commoditydetailsData.auditFirstLogList.reverse();
});
/** 资质切换状态 */
const qualificationsradioChange = (value: number) => {
  if (value == 0) {
    pricingStatus.value = 0;
    pricingradioAuditRemark.value = '';
  } else {
    pricingStatus.value = 1;
    pricingradioAuditRemark.value = '';
  }
  qualificationsAuditRemark.value = '';
};
/** 审核切换状态 */
const pricingradioChange = () => {
  pricingradioAuditRemark.value = '';
};
/** 处理不同状态回显的时间 */
const handleTimes = (auditStatus: string, requestTime: string, auditTime: string) => {
  if (auditStatus == '7') {
    return requestTime;
  } else {
    return auditTime;
  }
};
/** 处理不同状态回显的文字 */
const handledes = (auditStatus: string) => {
  if (auditStatus == '11') {
    return '已通过';
  } else if (auditStatus == '8' || auditStatus == '9') {
    return '资审驳回';
  } else if (auditStatus == '10') {
    return '核价驳回';
  } else {
    return '发起核价';
  }
};
/** 处理不同状态回显的文字 */
const auditStatusNameById = (auditStatus: string) => {
  if (auditStatus == '8' || auditStatus == '9' || auditStatus == '10') {
    return auditStatus;
  } else {
    return '';
  }
};
/** 处理不同状态回显的名字 */
const handleName = (auditStatus: string, auditor: string, createBy: string) => {
  if (auditStatus == '11') {
    return '审批人：' + auditor;
  } else if (auditStatus == '8' || auditStatus == '9' || auditStatus == '10') {
    return '审批人：' + auditor;
  } else {
    const staff = props.commoditydetailsData.type == '1' ? '研发专员：' : '招商员：';
    return staff + createBy;
  }
};

// 完成
const confirmClick = async () => {
  if (qualificationsStatus.value == 0) {
    // 资质审核=>资审驳回
    if (!qualificationsAuditRemark.value) {
      proxy?.$modal.msgError('请输入资审建议');
      return;
    }
    pricingradioAuditRemark.value = qualificationsAuditRemark.value;
  }
  if (pricingStatus.value == 0 && qualificationsStatus.value == 1) {
    // 核价=>重新议价
    if (!pricingradioAuditRemark.value) {
      proxy?.$modal.msgError('请输入核价建议');
      return;
    }
  }
  if (pricingStatus.value == 1) {
    // 核价=>审核通过
    if (!pricingradioAuditRemark.value) {
      proxy?.$modal.msgError('请输入核价建议');
      return;
    }
    if (!productImage.value) {
      proxy?.$modal.msgError('请上传平台比价截图');
      return;
    }
  }
  await proxy?.$modal.confirm('是否确认提交审核结果?');
  loading.value = true;
  var datas = {};
  if (qualificationsStatus.value == 1 && pricingStatus.value == 1) {
    // 资质审核通过 核价审核通过
    datas = {
      productId: props.commoditydetailsData.id,
      firstStatus: 11,
      // auditQualityRemark: '',
      auditPriceRemark: pricingradioAuditRemark.value,
      contrastImage: productImage.value
    };
  } else if (qualificationsStatus.value == 1 && pricingStatus.value == 0) {
    // 资质审核通过 核价审核驳回
    datas = {
      productId: props.commoditydetailsData.id,
      firstStatus: 10,
      // auditQualityRemark: '',
      auditPriceRemark: pricingradioAuditRemark.value
    };
  } else if (qualificationsStatus.value == 0 && pricingStatus.value == 1) {
    // 资质审核驳回 核价审核通过
    datas = {
      productId: props.commoditydetailsData.id,
      firstStatus: 9,
      auditQualityRemark: qualificationsAuditRemark.value,
      auditPriceRemark: pricingradioAuditRemark.value,
      contrastImage: productImage.value
    };
  } else if (qualificationsStatus.value == 0 && pricingStatus.value == 0) {
    // 资质审核驳回 核价审核驳回
    datas = {
      productId: props.commoditydetailsData.id,
      firstStatus: 8,
      auditQualityRemark: qualificationsAuditRemark.value,
      auditPriceRemark: pricingradioAuditRemark.value
    };
  }
  try {
    await auditFirst(datas);
    proxy?.$modal.msgSuccess('审核成功');
    handleClose();
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
/**
 * 价格禁用
 */
const priceDisabled = computed(() => {
  // 奇数
  if (props.commoditydetailsData.auditFirstLogList.length > 1) {
    const auditData = props.commoditydetailsData.auditFirstLogList[1];
    if (auditData.firstStatus == '9' || auditData.firstStatus == '11') {
      pricingStatus.value = 1;
      pricingradioAuditRemark.value = auditData.auditPriceRemark;
      productImage.value = auditData.contrastImage;
      return true;
    }
  } else {
    return false;
  }
});
/** 资审禁用 */
const qualificationDisabled = computed(() => {
  if (props.commoditydetailsData.auditFirstLogList.length > 1) {
    const auditData = props.commoditydetailsData.auditFirstLogList[1];
    if (auditData.firstStatus == '10' || auditData.firstStatus == '11') {
      qualificationsStatus.value = 1;
      return true;
    }
  } else {
    return false;
  }
});

/** 计算球得颜色 */
const computedStyle = (index: number, item: any) => {
  if (index == 0) {
    // 第一个
    return {
      'background-color': '#109AFF'
    };
  } else if (logList.value.length == index + 1) {
    return {
      border: '1px solid #109AFF'
    };
  } else {
    // 驳回
    if (item.firstStatus == '8' || item.firstStatus == '9' || item.firstStatus == '10') {
      return {
        'background-color': '#FC2540',
        border: 'none'
      };
    } else {
      // 待审
      return {
        'background-color': '#109AFF'
      };
    }
  }
};
/** 预览 */
const preview = async (id: string) => {
  const resp: any = await exportCertId(id);
  const blob = window.URL.createObjectURL(new Blob([resp], { type: 'application/pdf' }));
  window.open(blob);
};
/** 下载 */
const handleExport = async (id: string) => {
  const resp: any = await exportCertId(id);

  // 创建一个Blob对象，并传入响应数据
  const blob = new Blob([resp], { type: 'application/pdf' });

  // 创建一个指向该Blob对象的URL
  const url = window.URL.createObjectURL(blob);

  // 创建一个下载链接，并模拟点击它
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', `${props.commoditydetailsData.styleName}信息卡`); // 设置下载的文件名
  document.body.appendChild(link);
  link.click();

  // 从DOM中移除链接，并释放URL对象
  link.remove();
  window.URL.revokeObjectURL(url);
};
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose']);
const handleClose = () => {
  qualificationsAuditRemark.value = '';
  pricingradioAuditRemark.value = '';
  qualificationsStatus.value = 1;
  pricingStatus.value = 1;
  productImage.value = '';
  emits('doClose');
};
onMounted(() => { });
</script>
<style lang="scss" scoped>
.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
  margin-bottom: 10px;
}

.hm-drawer .el-drawer__header {
  margin-bottom: 0px !important;
}

.mb96 {
  margin-bottom: 10px;
}

:deep(.el-drawer__body) {
  overflow-x: hidden !important;
}

.hm-box-title {
  font-weight: 600;
  font-size: 21px;
  color: #1c1d1e;
  margin-bottom: 44px;
}

:deep(.el-drawer__body) {
  margin-top: 5px;
  padding-top: 0 !important;
}

:deep(.el-descriptions) {
  height: 100%;
}

.screen {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  top: 50px;

  .screen_div {
    width: 106px;
    height: 44px;
    background: #ebf7ff;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
    font-size: 14px;
    color: #0094ff;
  }

  .screen_div_hover {
    width: 106px;
    height: 44px;
    background: #0094ff;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
  }
}

.mechanism_flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  .mechanism_div {
    margin-bottom: 15px;
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 130px;
    }

    .value {
      width: calc(100% - 130px);
      word-break: break-all;
    }
  }

  .mechanism_divs {
    width: 100% !important;

    .titles {
      font-size: 14px;
      color: #303133;
      width: 200px;
    }

    .values {
      width: calc(100% - 200px);
      word-break: break-all;
    }
  }

  .mechanism_wrap {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: calc(100% - 100px);
      display: flex;
      align-items: center;

      .examine_item {
        width: 85px;
        height: 22px;
        background: #e7fdee;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 12px;
        color: #19d11b;
        line-height: 22px;
        margin-right: 10px;

        img {
          width: 14px;
          height: 14px;
          margin-left: 5px;
        }
      }
    }
  }

  .mechanism_img {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;
    flex-wrap: wrap;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 10px;

      .img_div {
        margin-right: 10px;
      }
    }

    video {
      width: 230px;
      height: 150px;
    }
  }
}

.flex_div {
  display: flex;
  margin-bottom: 10px;

  .label {
    min-width: 120px;
    font-size: 14px;
    background-color: rgba(240, 246, 255);
    padding: 4px 7px;

    img {
      width: 14px;
      height: 14px;
    }

    margin-right: 10px;
  }

  .value {
    color: #0094ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    cursor: pointer;

    span {
      margin-right: 30px;
    }
  }
}

:deep(.el-descriptions__body) {
  height: 100%;
}

:deep(.el-descriptions__table) {
  height: 100%;
}

.content_div_cooperationMode {
  :deep(.el-descriptions) {
    height: auto !important;
  }

  :deep(.el-descriptions__cell) {
    width: 30% !important;
  }

  .hm-form-mechanism {
    position: relative;

    .mechanism_title {
      font-weight: 500;
      font-size: 14px;
      color: #1a1b1c;
      margin-bottom: 15px;
    }

    .delete_mechanism {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 50%;
      cursor: pointer;
      z-index: 50;
    }
  }
}

.switch {
  width: 172px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #0094ff;
  margin: 20px 0;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #0094ff;

  .switch_div {
    width: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .switch_div_avtive {
    width: 50%;
    height: 30px;
    border-radius: 15px;
    background: #0094ff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
  }
}

.pricing_information {
  // display: flex;
  // flex-wrap: wrap;

  .findings_audit_content {
    // height: 80px;
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;

    .column {
      width: 100%;
      // display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      .content {
        font-size: 14px;
        color: #0094ff;
        position: absolute;
        top: -40px;
        left: 430px;
        margin-left: 10px;
        width: 340px;
        height: 92px;
        background: #f6fcff;
        border-radius: 10px;
        flex-wrap: wrap;
        align-content: space-around;
        display: flex;
        box-sizing: border-box;
        padding-left: 20px;

        .content_flex {
          .content_flex_is {
            display: flex;
            align-items: center;
          }

          .content_div {
            margin-right: 10px;
            line-height: 1;
          }

          .content_divs {
            width: 50px;

            :deep(.el-only-child__content) {
              display: block;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
            }
          }
        }
      }

      .contents {
        font-size: 14px;
        color: #0094ff;
        position: absolute;
        top: -40px;
        left: 430px;
        margin-left: 10px;
        min-height: 92px;
        min-width: 340px;
        background: linear-gradient(#ffefef 0%, #fefbfb 100%);
        border-radius: 10px;
        box-sizing: border-box;
        display: block;

        .contents_item {
          display: flex;
          align-items: center;
          margin-left: 20px;
          margin-top: 15px;
          margin-right: 20px;

          .reject {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            background: #fc2540;
            border-radius: 2px;
            margin-right: 10px;
            width: 70px;
            height: 24px;
            text-align: center;
            line-height: 24px;
          }

          .consent {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            background: #19d11b;
            border-radius: 2px;
            margin-right: 10px;
            width: 70px;
            height: 24px;
            text-align: center;
            line-height: 24px;
          }

          .reject_font {
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            flex: 1;
          }

          .consent_font {
            font-weight: 400;
            font-size: 14px;
            color: #19d11b;
            flex: 1;
          }
        }
      }

      .column_top {
        display: flex;
        height: 18px;
        margin-left: 10px;
        position: absolute;
        top: 0;
        left: 10px;
        align-items: center;
      }

      .circle {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        margin-bottom: 100px;
        margin-top: 3px;
        border: 1px solid #109aff;
      }

      .line {
        height: calc(100% - 11px);
        position: absolute;
        border-left: 1px solid #0094ff;
        top: 13px;
        left: 5px;
      }

      .adopt_proposal {
        font-size: 14px;
        line-height: 1.4;
      }

      .adopt_proposals {
        font-size: 14px;
        line-height: 1.4;
        margin-left: 10px;
      }

      .danger_name {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 20px;
        left: 10px;
        margin-left: 10px;
      }

      .danger_date {
        font-size: 14px;
        color: #b8beca;
        margin-left: 10px;
      }
    }
  }

  .pricing_proposal {
    .el-textarea {
      display: block;
      width: 1000px;
      margin-top: 10px;
    }

    .label {
      display: flex;
      align-items: center;
      margin: 10px 0;

      .label_left {
        font-weight: 500;
        font-size: 14px;
        color: #1a1b1c;
      }

      .label_right {
        font-weight: 400;
        font-size: 14px;
        color: #afb6c3;
        margin-left: 20px;
      }
    }

    .value {
      width: 100%;

      :deep(.upload-file-uploader) {
        width: 300px;
      }
    }
  }
}
</style>